<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            text-align: center;
        }
        a {
            text-decoration: none;
            color: teal;
            border-bottom: 1px solid teal;
        }
        h1 {
            font-size: 5rem;
        }
        h2 {
            font-size: 2.5rem;
        }
        p:nth-of-type(1)::before {
            content: "1";
        }
        p:nth-of-type(2)::before {
            content: "2";
        }
        p:nth-of-type(3)::before {
            content: "3";
            content: "fizz";
        }
        p:nth-of-type(4)::before {
            content: "4";
        }
        p:nth-of-type(5)::before {
            content: "5";
            content: "buzz";
        }
        p:nth-of-type(6)::before {
            content: "6";
            content: "fizz";
        }
        p:nth-of-type(7)::before {
            content: "7";
        }
        p:nth-of-type(8)::before {
            content: "8";
        }
        p:nth-of-type(9)::before {
            content: "9";
            content: "fizz";
        }
        p:nth-of-type(10)::before {
            content: "10";
            content: "buzz";
        }
        p:nth-of-type(11)::before {
            content: "11";
        }
        p:nth-of-type(12)::before {
            content: "12";
            content: "fizz";
        }
        p:nth-of-type(13)::before {
            content: "13";
        }
        p:nth-of-type(14)::before {
            content: "14";
        }
        p:nth-of-type(15)::before {
            content: "15";
            content: "fizz";
            content: "buzz";
            content: "fizzbuzz!";
        }
    </style>
</head>
<body>
<h1>
    <a href='#'>Fizzbuzz in CSS</a>
</h1>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>